<template>
  <view class="container">
    <view class="content">
      <view class="content-tab d-rn d-ac d-ja">
        <view
          class="content-tab-one d-cw d-ac d-jc"
          v-for="(item, index) in 2"
          :key="index"
          @click="handleNav(index)"
        >
          <text :class="navSts == index ? 'active' : 'outactive'">{{
            !index ? $t('my_performance') : $t('performance_score')
          }}</text>
          <text v-if="navSts == index"></text>
        </view>
      </view>
    </view>
    <view class="jixiao" v-if="!navSts">
      <view class="" style="margin-bottom: 20rpx">
        <!-- <view class="jixiao-title d-rn d-ac d-jb">
					<text>{{nowMonth}}月绩效</text> -->
        <!-- <text v-if="!item.state" style="color: #FA3737;" >待自评</text> -->
        <!-- <text v-if="item.state == 1">已评分</text> -->
        <!-- </view> -->
        <view class="jixiao-list">
          <view
            class="jixiao-list-one"
            v-for="(item, index) in mineLists"
            :key="index"
            @click="handleZiPing(item, index)"
          >
            <view
              class="d-rn d-ac d-jb"
              v-if="
                item.reviewScordReviewScoringStatus != 0 &&
                item.reviewScordReviewScoringStatus != 2
              "
            >
              <text class="text-1">{{ item.performanceName }}</text>
              <text class="text-2">{{
                item.reviewScoringStatus == 1
                  ? $t('pending_review1')
                  : item.reviewScoringStatus == 3
                  ? item.selfEvaluationScore + $t('score')
                  : item.reviewScoringStatus == 4
                  ? item.selfEvaluationScore + $t('score')
                  : ""
              }}</text>
              <text class="text-3"
                >{{ item.timeBak }}({{ item.employeeName }})</text
              >
            </view>
            <view class="d-rn d-ac d-jb" v-else>
              <text class="text-1">{{ item.performanceName }}</text>
              <text class="text-2"></text>
              <text class="text-3"
                ><span style="color: #fa3737">{{$t('pending_review2') }}</span></text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mark" v-else>
      <view class="mark-search d-rn d-ac">
        <image src="../../static/img/search.png" mode=""></image>
        <input
          style="flex: 1; margin-left: 20rpx"
          type="text"
          :placeholder="$t('search_by_name')"
          placeholder-style="#CCCCCC"
          v-model="assessor"
          @blur="search"
        />
      </view>
      <view class="mark-shai">
        <view class="content-select d-rn d-ac d-jb">
          <view class="content-select-one d-rn d-ac d-jc">
            <picker
              @change="bindPickerChange"
              :range="hostList"
              range-key="name"
              class="picker"
            >
              <view class="d-rn d-ac d-jc">
                <view
                  class="picker-con d-cn d-jc d-ac"
                  style="margin-right: 20rpx"
                >
                  <view class="uni-input one-txt-cut" v-if="typeName"
                    >{{ typeName }}
                  </view>
                  <view class="uni-input one-txt-cut" v-else>{{ $t('please_select_status') }}</view>
                </view>
                <image
                  src="../../static/img/bottom.png"
                  mode=""
                  class="bottom"
                ></image>
              </view>
            </picker>
          </view>
          <view class="content-select-shu"> | </view>
          <view class="content-select-one">
            <picker
              @change="bindPickerChangeDate"
              mode="date"
              :range="hostList"
              range-key="name"
              class="picker"
            >
              <view class="d-rn d-ac d-jc">
                <view class="picker-con d-cn d-jc" style="margin-right: 20rpx">
                  <view class="uni-input one-txt-cut" v-if="type.time"
                    >{{ type.time }}
                  </view>
                  <view class="uni-input one-txt-cut" v-else>{{ $t('please_select_time') }}</view>
                </view>
                <image
                  src="../../static/img/bottom.png"
                  mode=""
                  class="bottom"
                ></image>
              </view>
            </picker>
          </view>
        </view>
      </view>

      <view class="mark-list">
        <view class="jixiao-title d-rn d-ac d-jb">
          <text>{{ nowMonth }}{{ $t('monthly_performance') }}</text>
          <!-- <text v-if="!item.state" style="color: #FA3737;" >待自评</text> -->
          <!-- <text v-if="item.state == 1">已评分</text> -->
        </view>
        <view class="jixiao-list">
          <view
            class="jixiao-list-one d-rn d-ac d-jb"
            v-for="(item, index) in scoreList"
            :key="index"
            @click="handleScore(item, index)"
          >
            <text class="text-1">{{ item.performanceName }}</text>
            <text class="text-2">{{
              item.reviewScoringStatus == 0
                ? $t('pending_review3')
                : item.reviewScoringStatus == 1
                ? $t('pending_review1')
                : item.reviewScoringStatus == 2
                ? $t('pending_review3')
                : item.reviewScoringStatus == 3
                ? item.scoringValue + $t('score')
                : item.reviewScoringStatus == 4
                ? item.scoringValue + $t('score')
                : $t('pending_review4')
            }}</text>
            <text class="text-3"
              >{{ item.timeBak }}({{ item.employeeName }})</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var _self;
import {
  topicgetMonth,
  getPerformance,
  getPerformanceScoreList,
} from "../../api/index.js";
import moment from "moment";
moment.defineLocale("zh-cn", {
  relativeTime: {
    future: "%s内",
    past: "%s前",
    s: "几秒",
    m: "1分钟",
    mm: "%d分钟",
    h: "1小时",
    hh: "%d小时",
    d: "1天",
    dd: "%d天",
    M: "1个月",
    MM: "%d个月",
    y: "1年",
    yy: "%d年",
  },
});
export default {
  data() {
    return {
      navSts: 0,
      hostList: [
        {
          name: this.$t('all'),
          id: "",
        },
        {
          name: this.$t('pending_review6'),
          id: 0,
        },
        {
          name: this.$t('pending_review5'),
          id: 1,
        },
      ],
      type: {
        typeId: "",
        time: "",
      },
      typeName: "",
      assessor: "",

      pageNum: 1,
      pageSize: 10,
      hasPage: false,
      total: 0,
      totalPage: 0,
      obj: {},
      mineList: [],
      scoreList: [],
      mineLists: [],
      nowMonth: "",
      nowTime: "",
      needTime: "",
      roleName: uni.getStorageSync("roleName"),
      scoreQuary: {
        pageNum: 1,
        pageSize: 999,
        employeeName: null,
        isWhetherToRate: null,
      },
    };
  },
  onLoad() {
    _self = this;
    var today = new Date();
    _self.nowMonth = today.getMonth() + 1;
    _self.nowTime = Date.parse(new Date());
  },
  onShow() {
    // _self.gettopicList()
    // _self.getgetPerformance()
    _self.getgetPerformance();
  },
  methods: {
    // 我的绩效
    getgetPerformance() {
      getPerformance().then((res) => {
        if (res.code == 200) {
          res.data.records.forEach((item) => {
            if (item.reviewScordTime) {
              item.timeBak = moment(new Date(item.reviewScordTime)).fromNow();
            } else {
              item.timeBak = "";
            }
          });
          _self.mineLists = res.data.records;
        }
      });
    },
    // 绩效打分
    getgetPerformanceScoreList() {
      getPerformanceScoreList(this.scoreQuary).then((res) => {
        if (res.code == 200) {
          res.data.records.forEach((item) => {
            if (item.reviewScordTime) {
              item.timeBak = moment(new Date(item.reviewScordTime)).fromNow();
            } else {
              item.timeBak = "";
            }
          });
          _self.scoreList = res.data.records;
        }
      });
    },

    handleNav(index) {
      _self.navSts = index;
      _self.mineLists = [];
      _self.mineList = [];
      this.scoreList = [];
      this.scoreQuary = {
        pageNum: 1,
        pageSize: 999,
        employeeName: null,
        isWhetherToRate: null,
      };
      if (!index) {
        _self.getgetPerformance();
      } else {
        _self.getgetPerformanceScoreList();
      }
      // _self.gettopicList()
    },
    handleGoDe(item) {
      _self.$commonFun.goUrl(1, "../jixiaoqiangqing/index", item);
    },
    handleZiPing(item, index) {
      let ids = {
        id: item.id,
        ptableId: item.ptableId,
        performanceName: item.performanceName,
      };
	  
      if (item.reviewScoringStatus == 0 || item.reviewScoringStatus == 2) {
        if (
          item.reviewScordReviewScoringStatus == 0 ||
          item.reviewScordReviewScoringStatus == 2 
        ) {
          _self.$commonFun.goUrl(1, "../selfEvaluationOfPerformance/index", ids);
        }else if(item.reviewScordReviewScoringStatus == 3){
			 _self.$commonFun.goUrl(1, "../jixiaoqiangqing/index", ids);
		}
      } else if (
        item.reviewScoringStatus == 3 ||
        item.reviewScoringStatus == 4 
      ) {
        _self.$commonFun.goUrl(1, "../jixiaoqiangqing/index", ids);
      }
    },
    handleScore(item, index) {
      let ids = {
        id: item.id,
        ptableId: item.ptableId,
        performanceName: item.performanceName,
      };
      if (item.reviewScoringStatus == 0 || item.reviewScoringStatus == 2) {
        _self.$commonFun.goUrl(1, "../selfEvaluationOfPerformance/index", ids);
      } else if (
        item.reviewScoringStatus == 3 ||
        item.reviewScoringStatus == 4
      ) {
        _self.$commonFun.goUrl(1, "../jixiaoqiangqing/index", ids);
      }
    },
    bindPickerChange(e) {
      // _self.typeName = _self.hostList[e.detail.value].name
      // _self.type.typeId = _self.hostList[e.detail.value].id
      this.scoreQuary.isWhetherToRate = _self.hostList[e.detail.value].id;
      _self.getgetPerformanceScoreList();
      // _self.gettopicList()
    },
    bindPickerChangeDate(e) {
      _self.type.time = e.target.value;
      this.scoreQuary.reviewScordTime = e.target.value;
      _self.getgetPerformanceScoreList();
      // _self.gettopicList()
    },
    search() {
      _self.assessor = _self.$commonFun.delTxtLrK(_self.assessor);
      if (_self.assessor) {
        // _self.gettopicList()
        this.scoreQuary.employeeName = _self.assessor;
        _self.getgetPerformanceScoreList();
      }
    },
    gettopicList() {
      if (!_self.navSts) {
        _self.obj.userId = JSON.parse(uni.getStorageSync("loginInfo")).userid;
      } else {
        _self.obj.stateScore = _self.type.typeId;
        _self.obj.month = _self.type.time;
        _self.obj.assessor = _self.assessor;
      }
      topicgetMonth(_self.obj).then((res) => {
        if (res.code == 200) {
          _self.mineList = res.data;
          _self.mineList.forEach((item) => {
            if (item.month) {
              item.month = item.month.substring(5, 7);
            }
          });
          _self.total = res.total;
          _self.totalPage = _self.pageNum * _self.pageSize;
          if (_self.totalPage > res.total) {
            _self.hasPage = false;
          } else {
            _self.hasPage = true;
          }
        }
      });
    },
    // dateFormat(time) {
    //     let date = new Date(time);
    //     let year = date.getFullYear();
    //     // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    //     let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    //     let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    //     let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    //     let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    //     let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    //     // 拼接
    //     return hours + ":" + minutes + ":" + seconds;
    //     // return year + "-" + month + "-" + day;
    // },
  },
  onReachBottom() {
    if (_self.hasPage) {
      _self.pageNum++;
      _self.hasPage = false;
      _self.getleavegetAll();
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;

  .content {
    background-color: #ffffff;

    &-tab {
      padding: 24rpx 0;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1px solid #f5f5f5;

      text:nth-of-type(1) {
        font-size: 30rpx;
      }

      text:nth-of-type(2) {
        width: 138rpx;
        height: 4rpx;
        background-color: #fdb911;
        position: absolute;
        top: 93%;
      }

      .active {
        color: #333333;
        font-weight: 500;
      }

      .outactive {
        color: #999999;
      }
    }
  }

  .jixiao {
    width: 100%;
    margin-top: 20rpx;

    &-title {
      border-bottom: 1px solid #eeeeee;
      padding: 24rpx;
      box-sizing: border-box;
      background-color: #ffffff;

      text:nth-of-type(1) {
        font-size: 28rpx;
        color: #666666;
      }

      text:nth-of-type(2) {
        font-size: 28rpx;
      }
    }

    &-list {
      background-color: #ffffff;

      &-one {
        padding: 24rpx;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee;

        text {
          font-size: 28rpx;
          color: #666666;
        }

        .text-1 {
          width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .text-2 {
          // max-width: 100rpx;
          width: 120rpx;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .text-3 {
          width: 200rpx;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .mark {
    &-search {
      width: 94%;
      padding: 20rpx 35rpx;
      box-sizing: border-box;
      margin: 12rpx auto;
      border-radius: 2em;
      background-color: #ffffff;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      input {
        font-size: 26rpx;
        // color: #cccccc;
      }
    }

    &-shai {
      .content-select {
        background-color: #ffffff;

        &-one {
          width: 50%;
          padding: 22rpx 0;
          box-sizing: border-box;

          .bottom {
            width: 12rpx;
            height: 7rpx;
          }
        }

        &-shu {
          color: #eeeeee;
        }
      }
    }

    &-list {
      width: 100%;
      margin-top: 20rpx;

      &-one {
        padding: 24rpx 24rpx 0 24rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        margin-bottom: 20rpx;

        &-title {
          padding-bottom: 20rpx;
          box-sizing: border-box;
          border-bottom: 1px solid #eeeeee;

          text:nth-of-type(1) {
            font-size: 30rpx;
            color: #333333;
            margin-right: 18rpx;
          }

          text:nth-of-type(2) {
            font-size: 26rpx;
            color: #666666;
          }
        }

        &-fen {
          &-one {
            padding: 24rpx 0;
            box-sizing: border-box;
            border-bottom: 1px solid #eeeeee;

            text {
              width: 30%;
              font-size: 28rpx;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
</style>
